<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>
			importZXT("../../zxt");
		</script>
	</head>

	<body>

		<table width="100%" border="1">
			<thead>
				<tr class="zxt-FormHeader">
					<th>对象树模型</th>
					<th>XML树模型 + Checkbox </th>
					<th>XML树模型 + Radiobox</th>
					<th>链表树模型</th>
				</tr>
			</thead>
			<tr class="zxt-FormBody" height="300">
				<td width="25%" valign="top">
				<div id="c1"  zxt="zxt.ui.Rows" style="height:100%">
					<div id="aTree"  zxt="zxt.ui.Tree" zxt.model="aModel" zxt.label="citytree" zxt.text="中国城市" zxt.configFunc="configCityTree"></div>
					<div zxt.end="true">
						<div id="c11"  zxt="zxt.ui.Columns" style="background-color:#f3f8e6;">
							<div id="Expand" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="Expand" zxt.end="true"></div>
							<div id="Refresh" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="Refresh" zxt.end="true"></div>
							<div id="Reload" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="Reload" zxt.end="true"></div>
						</div>
					</div>
				</div></td>

				<td width="25%"valign="top">
				<div id="c2"  zxt="zxt.ui.Rows" style="height:100%">
					<div id="bTree"  zxt="zxt.ui.Tree" zxt.model="xModel" zxt.label="provincetree" zxt.text="移动网络" zxt.configFunc="configYDTree"></div>
					<div zxt.end="true">
						<div id="c21"  zxt="zxt.ui.Columns" style="background-color:#f3f8e6;">
							<div id="CheckStatus" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="多选状态" zxt.end="true"></div>
						</div>
					</div>
				</div></td>

				<td width="25%"valign="top">
				<div id="c3"  zxt="zxt.ui.Rows" style="height:100%">
					<div id="cTree"  zxt="zxt.ui.Tree" zxt.model="xModel" zxt.label="provincetree" zxt.text="移动网络" zxt.configFunc="configYDTree2"></div>
					<div zxt.end="true">
						<div id="c31"  zxt="zxt.ui.Columns" style="background-color:#f3f8e6;">
							<div id="RadioStatus" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="单选状态" zxt.end="true"></div>
						</div>
					</div>
				</div></td>

				<td width="25%" valign="top">
				<div id="c4"  zxt="zxt.ui.Rows" style="height:100%">
					<div id="dTree"  zxt="zxt.ui.Tree" zxt.model="lModel" zxt.label="xptree" zxt.text="Windows XP" zxt.configFunc="configXPTree"></div>
					<div zxt.end="true">
						<div id="c41"  zxt="zxt.ui.Columns" style="background-color:#f3f8e6;">
							<div id="Backward" zxt="zxt.ui.Button" zxt.label="disable" zxt.text="返回节点" zxt.end="true"></div>
						</div>
					</div>
				</div></td>
			</tr>

		</table>
		<div>
			<a href="../index.html">返回</a>
		</div>
	</body>
</html>

<script type="text/javascript">
	function configCityTree(tree) {
		tree.nodeInitializer = cityNodeInitializer;
	}

	function cityNodeInitializer(node) {
		node.textClicked = function() {
			alert(node.label());
		};
	}

	function configYDTree(tree) {
		tree.emptyNodeAsLeaf = false;
		tree.hideRoot = false;
		tree.nodeInitializer = ydNodeInitializer;
	}

	function ydNodeInitializer(node) {
		node.type(new zxt.ui.CheckItemType(false));
	}

	function configYDTree2(tree) {
		tree.emptyNodeAsLeaf = false;
		tree.hideRoot = false;
		tree.nodeInitializer = ydNodeInitializer2;
	}

	function ydNodeInitializer2(node) {
		if(!node.top())
			node.type(new zxt.ui.RadioItemType(false));
	}

	function configXPTree(tree) {
		tree.emptyNodeAsLeaf = false;
		tree.hideRoot = false;
		tree.nodeInitializer = xpNodeInitializer;
	}

	function xpNodeInitializer(node) {
		node.textClicked = function() {
			$zxtUI.dTree.target(node);
			$zxtUI.dTree.render();
		}
		if(node.depth() < 3) {
			node.open(true);
		}

		if(node.top()) {
			node.icon("../../zxt/images/eftree_cu.gif");
			node.openIcon("../../zxt/images/eftree_cu.gif");
			return;
		}

		if(node.data().openIcon == null) {
			node.icon(node.data().icon);
			node.openIcon(node.data().icon);
		} else {
			node.icon(node.data().icon);
			node.openIcon(node.data().openIcon);
		}

		if(node.data().deleted) {
			node.textDom().style.color = "red";
			node.textDom().style.textDecoration = "line-through";
		}

		if(node.data().hide == "1") {
			node.show(false);
		}

	}
</script>

<script>
	function onClick$Expand() {
		var node = $zxtUI.aTree.expandNode('12');
		node.textDom().style.backgroundColor = "#eacef0";
		node = $zxtUI.aTree.expandNode('11');
		node.textDom().style.backgroundColor = "#eacef0";
	}

	function onClick$Refresh() {
		aModel.addChild("111", {
			label : "1111",
			parent : "111",
			text : "江都",
			name : "JD"
		});
		var no = $zxtUI.aTree.getNode("111");
		no.text("-- 扬州 --");
		no.textDom().style.textDecoration = "";
		no.reload();
	}

	function onClick$Reload() {
		$zxtUI.aTree.emptyNodeAsLeaf = false;
		$zxtUI.aTree.nodeInitializer = null;
		$zxtUI.aTree.rootNode().text("组织机构");
		$zxtUI.aTree.rootNode().type(null);
		$zxtUI.aTree.reload(lModel);
	}

	function onClick$CheckStatus() {
		var _selectedItems = $zxtUI.bTree.getChecked();
		for(var i = 0; i < _selectedItems.length; i++) {
			alert(_selectedItems[i]);
		}
	};

	function onClick$RadioStatus() {
		var _sel = $zxtUI.cTree.getOption();
		alert(_sel);
	};

	function onClick$Backward() {
		$zxtUI.dTree.backward();
	};

</script>

<script type="text/javascript">
	var aModel = new zxt.data.ObjectTreeModel();
	aModel.addChild("", {
		label : "1",
		parent : "",
		text : "中国",
		name : "China"
	});
	aModel.addChild("1", {
		label : "11",
		parent : "1",
		text : "江苏",
		name : "JS"
	});
	aModel.addChild("1", {
		label : "12",
		parent : "1",
		text : "上海",
		name : "SH"
	});
	aModel.addChild("11", {
		label : "111",
		parent : "11",
		text : "扬州",
		name : "YZ"
	});

	var xml = "<tree><tree label='1' text='中国移动'><tree label='11' text='江苏移动'></tree><tree label='12' text='上海移动'></tree></tree><tree label='2' text='中国电信'><tree label='21' text='江苏电信'></tree><tree label='22' text='上海电信'></tree></tree></tree>"
	var xModel = new zxt.data.XmlTreeModel(xml);

	var data = new Array();
	data.push({
		label : "/",
		parent : "",
		text : "我的电脑",
		icon : "../images/054.gif"
	});
	data.push({
		label : "/A",
		parent : "/",
		text : "A",
		icon : "../images/066.gif"
	});
	data.push({
		label : "/C",
		parent : "/",
		text : "C",
		icon : "../images/069.gif"
	});
	data.push({
		label : "/C/DocumentsAndSettings",
		parent : "/C",
		text : "Documents and Settings",
		icon : "../images/005.gif",
		openIcon : "../images/001.gif"
	});
	data.push({
		label : "/C/WINDOWS",
		parent : "/C",
		text : "WINDOWS",
		icon : "../images/005.gif",
		openIcon : "../images/001.gif"
	});
	data.push({
		label : "/C/WINDOWS/system",
		parent : "/C/WINDOWS",
		text : "system",
		icon : "../images/005.gif",
		openIcon : "../images/001.gif",
		hide : "1"
	});
	data.push({
		label : "/D",
		parent : "/",
		text : "D",
		icon : "../images/069.gif"
	});
	data.push({
		label : "/E",
		parent : "/",
		text : "E",
		icon : "../images/081.gif"
	});
	data.push({
		label : "/1",
		parent : "/",
		text : "回收站",
		icon : "../images/060.gif"
	});
	data.push({
		label : "/1/1",
		parent : "/1",
		leaf : "1",
		text : "a.txt",
		icon : "../images/253.gif",
		deleted : "1"
	});
	data.push({
		label : "/1/2",
		parent : "/1",
		leaf : "1",
		text : "b.doc",
		icon : "../images/253.gif",
		deleted : "1"
	});
	var lModel = new zxt.data.ListTreeModel(data);

	$zxt.init();

</script>
<script>
	var aTree = new zxt.ui.Tree( aModel, "TESTTREE", "测试树" );
	aTree.emptyNodeAsLeaf = false;
	aTree.hideRoot = false;
	aTree.nodeInitializer = treeNodeInitializer;

	$("#aTree").append( aTree.render() );


	function treeNodeInitializer(node){
		node.type( new zxt.ui.CheckItemType(false) );	       

		node.textClicked = function(){ 
			if ( node.top() ){ alert("TOP NODE") } else { alert( node.label() ); }
			aTree.target(node);
			aTree.render();
		};
		
		if ( node.depth() < 3 ){
			node.open(false);
		}
		
	}    
</script>
